<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="cardList">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="gettableData">
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="gettableData"
              @clear="gettableData"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <el-button type="primary" @click="addGoods">添加商品</el-button>
          </div>
        </el-col>
      </el-row>
      <el-table :data="tableData" ref="table" border stripe class="tableTop">
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column prop="name" label="商品名称" width="460"></el-table-column>
        <el-table-column prop="money" label="商品价格(元)" width="150"></el-table-column>
        <el-table-column prop="kg" label="商品重量(g)" width="150"></el-table-column>
        <el-table-column prop="date" label="创建时间"></el-table-column>
        <el-table-column label="操作" width="180">
          <slot slot-scope="scope">
            <el-row justify="center">
              <el-button
                type="success"
                icon="el-icon-edit"
                size="mini"
                :xs="8"
                @click="editUser(scope.row)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                :xs="8"
                @click="deleteUser(scope.row)"
              ></el-button>
            </el-row>
          </slot>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
        class="page tableTop"
      ></el-pagination>
    </el-card>
    <el-dialog title="添加分类" :visible.sync="dialogVisible" width="50%" @close="listClose">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="addForm" label-width="100px">
        <el-form-item label="分类名称" prop="name">
          <el-input type="text" v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="number">
          <el-input type="number" v-model="ruleForm.money"></el-input>
        </el-form-item>
        <el-form-item label="重量" prop="number">
          <el-input type="text" v-model="ruleForm.kg"></el-input>
        </el-form-item>
        <el-form-item label="时间" prop="date">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="ruleForm.date"
            style="width: 100%;"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editSuc">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  created() {
    this.gettableData();
  },
  data() {
    return {
      dialogVisible: false,
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 2
      },
      tableData: [],
      addDialog: false,
      ruleForm: {
        money: 0,
        date: "",
        name: "",
        kg: 0
      },
      rules: {
        name: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10个字符", trigger: "blur" }
        ],
        number: [{ type: "number", message: "请输入正确的数值" }],
        date: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ]
      }
    };
  },
  methods: {
    gettableData() {
      this.tableData = [
        {
          money: 400,
          date: "2016-05-02",
          name: "海尔大电视",
          kg: 210
        },
        {
          money: 300,
          date: "2016-05-04",

          name: "blibli小飞机",
          kg: 320
        },
        {
          money: 2900,
          date: "2016-05-01",
          name: "皮卡丘大公仔",
          kg: 720
        },
        {
          money: 200,
          date: "2016-05-03",
          name: "lol玩具手办 ",
          kg: 720
        },
        {
          money: 2900,
          date: "2016-05-01",
          name: "皮卡丘大公仔",
          kg: 720
        },
        {
          money: 200,
          date: "2016-05-03",
          name: "lol玩具手办 ",
          kg: 720
        },
        {
          money: 2900,
          date: "2016-05-01",
          name: "皮卡丘大公仔",
          kg: 720
        },
        {
          money: 200,
          date: "2016-05-03",
          name: "lol玩具手办 ",
          kg: 720
        },
        {
          money: 2900,
          date: "2016-05-01",
          name: "皮卡丘大公仔",
          kg: 720
        },
        {
          money: 200,
          date: "2016-05-03",
          name: "lol玩具手办 ",
          kg: 720
        }
      ];
      if (this.queryInfo.query != "") {
        var temp = [];
        for (let i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].name.includes(this.queryInfo.query)) {
            temp.push(this.tableData[i]);
            console.log(this.tableData);
          }
        }
        this.tableData = temp;
      }
    },
    handleSizeChange() {
      this.$message({
        message: "切换成功",
        type: "success"
      });
    },
    handleCurrentChange() {
      this.$message({
        message: "切换成功",
        type: "success"
      });
    },
    listClose() {
    
    },
    addGoods() {
      this.$router.push('./shop/add');
    /*  console.log(this.ruleForm);
      let date = this.ruleForm.date;
      this.ruleForm.date = date;
      this.tableData.push(this.ruleForm);
      this.dialogVisible = false;
      this.ruleForm= {
        money: 0,
        date: "",
        name: "",
        kg: 0
      };
      this.Message({ message: "添加成功", type: "success", duration: 800 });*/
    },
    deleteUser(data) {
      this.$message({
        message: "删除成功",
        type: "success"
      });
    },
    editUser(data) {
      this.ruleForm = data;
      this.dialogVisible = true;
    },
    editSuc(){
      this.$message({
        message:"修改成功",
        type:"success"
      })
    }
  }
};
</script>
<style scoped>
</style>